import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Dropdown,
  Row,
  Col,
  Modal,
  Collapse,
  List,
  Radio,
  Upload,
  Tooltip,
  message,
} from 'antd';
import styles from './CustomerSelector.less';
import AddCustomer from '../../components/Falcon/Customer/AddCustomer';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};

@connect(({ apply, customer }) => ({
  apply,
  customer,
}))
@Form.create()
export default class CustomerSelector extends PureComponent {
  state = {
    addCustomerShow: false,
    modal1Visible: false,
    mobileFlag: false,
    customerDetails: null,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'customer/getApplyCustomerList',
      payload: {
        offset: 0,
        limit: 10,
      },
    });
  }

  columns = [
    {
      title: '客户编号',
      dataIndex: 'custNo',
      key: 'custNo',
    },
    {
      title: '客户姓名',
      dataIndex: 'custName',
      key: 'custName',
    },
    {
      title: '身份证号',
      dataIndex: 'idcard',
      key: 'idcard',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
  ];

  handleModal = () => {
    this.setState({
      mobileFlag: true,
    });
  };

  handleCancel = () => {
    this.setState({
      mobileFlag: false,
    });
  };

  handleOnOK = () => {
    this.setState({
      mobileFlag: false,
    });
  };

  handleStandardTableChange = e => {
    // e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        offset: (e.current - 1) * e.pageSize,
        limit: e.pageSize,
        ...fieldsValue,
      };
      dispatch({
        type: 'customer/getApplyCustomerList',
        payload: {
          values,
        },
      });
    });
    // this.props.dispatch({
    //   type: 'customer/getApplyCustomerList',
    //   payload: { offset: (e.current - 1) * e.pageSize, limit: e.pageSize },
    // });
  };

  hanleAddMaintenance = () => {
    this.setState({
      modal1Visible: true,
      addCustomerShow: true,
    });
  };

  //客户新增取消
  handleOnCancel = () => {
    this.setState({
      modal1Visible: false,
    });
  };

  handleAddCustomerOnOK = () => {
    const { dispatch } = this.props;
    const form = this.formRef.props.form;
    // console.log("handleAddCustomerOnOK", form)
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      // console.log('Received values of form: ', values);
      form.resetFields();
      this.props.dispatch({
        type: 'customer/createCustomer',
        payload: {
          ...values,
        },
        callback: () => {
          const { customer: { customerResult, customerLoading } } = this.props;
          // console.log("customerResult121211", customerResult.code);
          if (customerResult.code == '200') {
            message.success('添加成功');
            this.setState({
              modal1Visible: false,
            });
            dispatch({
              type: 'customer/getApplyCustomerList',
              payload: {
                offset: 0,
                limit: 10,
              },
            });
          } else {
            message.error(customerResult.message);
          }
        },
      });
    });
  };

  saveFormRef = formRef => {
    // console.log("saveFormRef", formRef)
    this.formRef = formRef;
  };

  handleSearch = e => {
    // e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        offset: 0,
        limit: 10,
        ...fieldsValue,
      };
      dispatch({
        type: 'customer/getApplyCustomerList',
        payload: values,
      });
    });
  };

  handleCustomerSelect = record => {
    // console.log("recohandleCustomerSelectrd", record)
    this.setState({
      customerDetails: record,
    });
  };

  //重置
  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({
      custName: '',
      idcard: '',
      phone: '',
    });
    dispatch({
      type: 'customer/getApplyCustomerList',
      payload: {
        offset: 0,
        limit: 10,
      },
    });
  };

  renderSimpleForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={12} sm={24}>
            <FormItem label="客户姓名">
              {getFieldDecorator('custName')(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={12} sm={24}>
            <FormItem label="身份证号">
              {getFieldDecorator('idCard')(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={12} sm={24}>
            <Button icon="plus" type="primary" onClick={this.hanleAddMaintenance}>
              添加
            </Button>
          </Col>
          <Col md={12} sm={24}>
            <span className={styles.submitButtons} style={{ textAlign: 'right' }}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{ marginLeft: 10 }} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }
  render() {
    const { customers } = this.props.apply;
    const { customer: { applyCustomerList, customerPage, customerLoading } } = this.props;
    const { getFieldDecorator } = this.props.form;

    const rowSelection = {
      type: 'radio',
      onSelect: this.handleCustomerSelect,
    };

    return (
      <Modal width="800px" title="客户列表" {...this.props}>
        <div className={styles.tableListForm}>{this.renderSimpleForm()}</div>
        <Table
          style={{ marginTop: '5px' }}
          size="small"
          rowKey="id"
          columns={this.columns}
          pagination={customerPage}
          loading={customerLoading}
          rowSelection={rowSelection}
          dataSource={applyCustomerList}
          onChange={this.handleStandardTableChange}
        />

        <Modal
          title="选择"
          visible={this.state.mobileFlag}
          onCancel={this.handleCancel}
          onOk={this.handleOnOK}
        />
        <Modal
          title="客户新增"
          visible={this.state.modal1Visible}
          onCancel={this.handleOnCancel}
          onOk={this.handleAddCustomerOnOK}
        >
          <AddCustomer marriageShow={false} wrappedComponentRef={this.saveFormRef} />
        </Modal>
      </Modal>
    );
  }
}
